<template>
	<view>
		<button type="primary" class="picker">picker测试</button>
		<picker-view  :value="value" @change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			 const date = new Date()
			        const years = []
			        const year = date.getFullYear()
			        const months = []
			        const month = date.getMonth() + 1
			        const days = []
			        const day = date.getDate()
			        for (let i = 1990; i <= date.getFullYear(); i++) {
			            years.push(i)
			        }
			        for (let i = 1; i <= 12; i++) {
			            months.push(i)
			        }
			        for (let i = 1; i <= 31; i++) {
			            days.push(i)
			        }
			        return {
			            title: 'picker-view',
			            years,
			            year,
			            months,
			            month,
			            days,
			            day,
			            value: [9999, month - 1, day - 1],
			            visible: true,
			            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			        }
		},
		methods: {
			bindChange: function (e) {
			            const val = e.detail.value
						console.log(e)
			           
			        }
		}
	}
</script>

<style>
.picker{
	margin: 40rpx 40rpx 0;
}
picker-view {
        width: 100%;
        height: 600upx;
        margin-top:20upx;
    }

    .item {
        line-height: 100upx;
        text-align: center;
    }
</style>
